
<style scoped lang="less">
    .admin{
        width:100%;
        height:100%;
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        .admin-content{
            width:100%;
            height:100%;
        }
        .admin-scoll{
            width:100%;
            height:100%;
            overflow:auto;
        }
        .admin-left{
            height:100%;
            background: #464c5b;
            padding-top:60px;
            position: relative;
            .admin-logo{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                text-align:center;
                h1{font-size:0; line-height:0;}
                a{display:block;}
                img{width:60px;}
            }
            .admin-scoll{
                &::-webkit-scrollbar{
                    background-color:#313540;
                    width:10px;
                    height:10px;
                }
                &::-webkit-scrollbar-thumb{
                    border-radius:10px;
                    background-color:#3399ff;
                }
            }
        }
        //右边
        .admin-right{
            height:100%;
            padding-top:60px;
            position:relative;
            .admin-header{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                padding:15px;
                height: 60px;
                z-index:999;
                background: #fff;
                text-align:right;
                box-shadow: 0 1px 1px rgba(0,0,0,.1);
            }
            //面包屑导航
            .admin-breadcrumb{
                padding:10px 0;
            }
            .admin-body{
                padding:0 15px;
                min-height:100%;
                padding-bottom:42px;
                position:relative;
            }
            .admin-content{
                padding:1em;
                min-height:200px;
                background-color:#fff;
            }
            .admin-copy{
                width:100%;
                position:absolute;
                left:0;
                bottom:0;
                font-size:12px;
                text-align:center;
                padding:1em 0;
            }
        }

    }
</style>
<template>
    <div class="admin">
        <Row type="flex" class="admin-content">
            <Col :span="5" class="admin-left">
                <div class="admin-logo"><h1><router-link to="/"><img src="../images/logo.png"></router-link></h1></div>
                <div class="admin-scoll">
                    <AdminMenu
                        :open-name="['0']"
                        active-name="admin"
                    ></AdminMenu>
                </div>
            </Col>
            <Col :span="19" class="admin-right">
                <div class="admin-header">
                    <Button type="ghost" shape="circle" icon="ios-search"></Button>
                    <router-link to="/login"><Button type="primary" shape="circle" icon="log-in">登出</Button></router-link>
                </div>
                <div class="admin-scoll">
                    <div class="admin-body">
                        <Breadcrumb class="admin-breadcrumb">
                            <Breadcrumb-item>首页</Breadcrumb-item>
                            <Breadcrumb-item>{{this.$route.path.replace('/','')}}</Breadcrumb-item>
                        </Breadcrumb>
                        <transition mode="out-in">
                            <router-view class="admin-content"></router-view>
                        </transition>
                        <div class="admin-copy">2011-2016 &copy; Dingla</div>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import AdminMenu from './../components/AdminMenu.vue';

    export default {
        components: {
            AdminMenu
        },
        data () {
            return {
            }
        },
        methods: {

        }
    }
</script>
